<template>
  <el-dialog
    :visible="visible"
    width="450px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    custom-class="question-dialog"
    @close="onClose"
  >
    <div class="question-loading" v-loading="loading" element-loading-spinner="el-icon-loading">
      <template v-if="!loading">
        <el-scrollbar class="question-scrollbar">
          <div class="question" v-for="topic in questionData.topic" :key="topic.id">
            <div class="question-header">
              <div class="title" v-html="topic.title"></div>
              <div v-if="!$util.isEmpty(topic.material)" class="question-player">
                <div
                  class="item"
                  :class="item.type"
                  v-for="(item, index) in topic.material"
                  :key="index"
                >
                  <BaseAudio
                    v-if="item.type === 'audio'"
                    :fileurl="item.src"
                    :index="index"
                    :palyIndex="palyIndex"
                    @play="handlePlay"
                  ></BaseAudio>
                  <BaseVideo
                    v-else-if="item.type === 'video'"
                    :fileurl="item.src"
                    :index="index"
                    :palyIndex="palyIndex"
                    @play="handlePlay"
                  >
                  </BaseVideo>
                </div>
              </div>
            </div>
            <div class="question-body">
              <!-- 单选/判断 -->
              <div class="question-radio" v-if="$util.inArray(topic.question_type, [1, 2])">
                <el-radio-group v-model="radio" :disabled="is_answered">
                  <el-radio :label="item.id" v-for="item in topic.options" :key="item.id">
                    <span class="key">{{ `${item.key}.` }}</span>
                    <div v-html="item.value" class="content"></div>
                  </el-radio>
                </el-radio-group>
              </div>
              <!-- 多选 -->
              <div class="question-select" v-else-if="$util.inArray(topic.question_type, [3, 4])">
                <el-checkbox-group v-model="checkList" :disabled="is_answered">
                  <el-checkbox :label="item.id" v-for="item in topic.options" :key="item.id">
                    <span class="key">{{ `${item.key}.` }}</span>
                    <div v-html="item.value" class="content"></div>
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div class="question-answer" v-if="is_answered">
              <span class="label">正确答案：</span>
              <span class="item">{{ correctAnswer(topic.options) }}</span>
            </div>
            <div class="question-analyze" v-if="is_answered">
              <span class="key">解析:</span>
              <div v-html="topic.analyze" class="content"></div>
            </div>
          </div>
        </el-scrollbar>

        <div class="question-right" v-if="is_answered">
          <el-image
            v-if="is_right"
            :src="require('@/assets/images/exam/exam_correct_icon.png')"
          ></el-image>
          <el-image v-else :src="require('@/assets/images/exam/exam_fault_icon.png')"></el-image>
        </div>

        <div class="question-submit">
          <template v-if="is_answered">
            <template v-if="answerPass == 1 || answerCoiledWrongCount == maxAnswerCount">
              <el-button type="primary" size="small" @click="handletContinue"
                >我知道了，继续学习</el-button
              >
            </template>
            <el-button v-else type="primary" size="small" @click="handletNextQuestion"
              >下一题</el-button
            >
          </template>
          <el-button
            v-else
            type="primary"
            size="small"
            @click="handletQuestionAnswer(questionData.topic[0])"
            >提交</el-button
          >
        </div>
      </template>
    </div>
  </el-dialog>
</template>

<script>
import BaseAudio from './components/baseAudio'
import BaseVideo from './components/baseVideo'
import { mapState } from 'vuex'
export default {
  name: 'Question',
  components: {
    BaseAudio,
    BaseVideo
  },
  props: {
    course_id: {
      type: Number,
      default: 0
    },
    course_type: {
      type: Number,
      default: 0
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      radio: '', // 单选
      checkList: [], // 多选
      is_right: false, // 答案是否正确
      is_answered: false, // 是否作答
      answerCoiledWrongCount: 0, // 答案连续做错次数
      questionData: {},
      palyIndex: 0
    }
  },
  computed: {
    // 开启表示作答后不论对错即可继续学习
    answerPass() {
      return this.questionData.answer_pass
    },
    // 最大连续错题次数
    maxAnswerCount() {
      return this.questionData.answer_max_count
    },
    ...mapState({
      getCurrentPlayItem: state => state.course.currentPlayItem // 课时数据
    })
  },
  mounted() {
    this.getQuestion()
  },
  methods: {
    // 获取弹题数据
    getQuestion() {
      this.loading = true
      this.radio = ''
      this.checkList = []
      this.is_right = false
      this.is_answered = false
      let cid = this.course_type == 4 ? this.course_id : 0
      this.$api.getCourseQuestion(
        this.getCurrentPlayItem.course_id,
        {
          class_id: cid
        },
        res => {
          this.questionData = res.data
          setTimeout(() => {
            this.loading = false
          }, 200)
        }
      )
    },
    // 正确答案的 key 值
    correctAnswer(options) {
      let answer = options.filter(item => item.is_right == 1)
      return answer.map(item => item.key).toString()
    },
    // 提交
    handletQuestionAnswer(topic) {
      const type = topic.question_type
      const options = topic.options
      const currentAnswer = options.filter(item => item.is_right == 1).map(item => item.id)
      if (this.$util.inArray(type, [1, 2])) {
        this.is_right = currentAnswer.toString() == this.radio
      } else {
        let result =
          currentAnswer.length === this.checkList.length &&
          currentAnswer.every(a => this.checkList.some(b => a === b)) &&
          this.checkList.every(_b => currentAnswer.some(_a => _a === _b))
        this.is_right = result
      }

      // 连续打错次数
      if (this.is_right) {
        this.handletContinue()
      } else {
        this.answerCoiledWrongCount++
        this.is_answered = true
      }
    },
    // 下一题
    handletNextQuestion() {
      this.getQuestion()
    },
    // 继续学习
    handletContinue() {
      this.onClose()
      this.$emit('click')
    },
    // 播放时
    handlePlay(index) {
      this.palyIndex = index
    },
    /*关闭弹窗，以及关闭摄像头功能*/
    onClose() {
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang="scss">
.question-dialog {
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 0;
  }
}
</style>
<style lang="scss" scoped>
.question {
  position: relative;
  box-sizing: border-box;
  padding: 0 20px 20px;
  &-loading {
    min-height: 240px;
    position: relative;
    padding-top: 20px;
    padding-bottom: 60px;
  }
  &-scrollbar {
    ::v-deep .el-scrollbar__wrap {
      max-height: 300px;
      overflow-x: hidden;
      overflow-y: auto;
    }
    ::v-deep .el-scrollbar__bar.is-vertical {
      opacity: 1;
    }
    ::v-deep .el-scrollbar__bar.is-horizontal {
      opacity: 0;
    }
  }
  &-header {
    padding: 0 20px;
    box-sizing: border-box;
    .title {
      font-size: 14px;
      font-weight: 500;
      color: $text-color-import;
      line-height: 20px;
      ::v-deep * {
        padding: 0;
        margin: 0;
        img {
          max-width: 100%;
        }
      }
    }
    .question-player {
      display: flex;
      flex-wrap: wrap;
      .item {
        &.video {
          width: calc(50% - 10px);
          margin-top: 15px;
        }
        &.video:nth-child(odd) {
          margin-right: 20px;
        }
        &.audio {
          width: 100%;
          margin-top: 15px;
        }
      }
    }
  }
  &-body {
    margin-top: 10px;
    padding: 0 20px;
    box-sizing: border-box;
    // 单选
    .question-radio {
      .el-radio-group {
        display: flex;
        flex-direction: column;
      }
      .el-radio {
        display: flex;
        align-items: flex-start;
        margin-right: 0;
        white-space: normal;
        margin-top: 12px;
        color: $text-color-import;
        ::v-deep .el-radio__input.is-checked + .el-radio__label {
          color: $text-color-import;
        }
        ::v-deep .el-radio__label {
          display: flex;
          align-items: flex-start;
          @include clearfix();
        }
        .key {
          float: left;
        }
        .content {
          ::v-deep * {
            margin: 0;
            padding: 0;
          }
          ::v-deep img {
            max-width: 100%;
          }
        }
        ::v-deep .el-radio__input.is-disabled + span.el-radio__label {
          color: $text-color-import;
        }
        ::v-deep .el-radio__input.is-disabled .el-radio__inner {
          border-color: #dcdfe6;
          background-color: #ffffff;
        }
        ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner {
          @include edu-color-primary(background-color);
          @include edu-color-primary(border-color);
        }
        ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
          background-color: #ffffff;
        }
      }
    }
    // 多选
    .question-select {
      .el-checkbox-group {
        display: flex;
        flex-direction: column;
      }
      ::v-deep .el-checkbox__input {
        margin-top: 3px;
      }
      .el-checkbox {
        display: flex;
        align-items: flex-start;
        margin-right: 0;
        white-space: normal;
        margin-top: 12px;
        color: $text-color-import;
        ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
          color: $text-color-import;
        }
        ::v-deep .el-checkbox__label {
          display: flex;
          align-items: flex-start;
          @include clearfix();
        }
        .key {
          float: left;
        }
        .content {
          ::v-deep * {
            margin: 0;
            padding: 0;
          }
          ::v-deep img {
            max-width: 100%;
          }
        }
        ::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner {
          background-color: #ffffff;
          border-color: #dcdfe6;
        }
        ::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
          color: $text-color-import;
        }
        ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
        ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
          @include edu-color-primary(background-color);
          @include edu-color-primary(border-color);
        }
        ::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner::after {
          border-color: #ffffff;
        }
      }
    }
  }
  &-answer {
    padding: 0 20px;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    box-sizing: border-box;
    .label {
      color: $text-color-free;
    }
    .item {
      color: $text-color-import;
    }
  }
  &-analyze {
    padding: 0 20px;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 400;
    color: $text-color-secondary;
    line-height: 24px;
    @include clearfix();
    box-sizing: border-box;
    .key {
      float: left;
    }
    .content {
      ::v-deep * {
        margin: 0;
        padding: 0;
      }
      ::v-deep img {
        max-width: 100%;
      }
    }
  }
  &-right {
    position: absolute;
    top: 16px;
    right: 16px;
  }
  &-submit {
    height: 60px;
    padding-top: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
  }
}
</style>
